<template>
  <div>
    <slot v-if="ready" />
  </div>
</template>

<script>
import { DomEvent, semiCircle } from 'leaflet'
import { findRealParent, propsBinder } from 'vue2-leaflet'
import 'leaflet-semicircle'
const props = {
  latLng: {
    type: Array
  },
  options: {
    type: Object
  },
  visible: {
    type: Boolean,
    custom: true,
    default: true
  }
}
export default {
  name: 'MapSemiCircle',
  props: props,
  data() {
    return {
      ready: false
    }
  },
  mounted() {
    const options = this.options
    options.radius = this.options.radius || 500
    options.startAngle = this.options.startAngle
    options.stopAngle = this.options.stopAngle || 135
    this.mapObject = semiCircle(this.latLng, options)
    DomEvent.on(this.mapObject, this.$listeners)
    propsBinder(this, this.mapObject, props)
    this.ready = true
    this.parentContainer = findRealParent(this.$parent)
    this.parentContainer.addLayer(this, !this.visible)
  },
  beforeDestroy() {
    this.parentContainer.removeLayer(this)
  },
  methods: {
    setVisible(newVal, oldVal) {
      if (newVal === oldVal) return
      if (this.mapObject) {
        if (newVal) {
          this.mapObject.addTo(this.parent)
        } else {
          this.parent.removeLayer(this.mapObject)
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>

</style>
